﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>Person</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style type="text/css"> 
		@font-face{
			font-family:CrazyIt;
			src: url("../static/images/Blazed.ttf") format("TrueType");
		}
	</style>
</head>
<body style="background-color:whitesmoke;background: url('../static/images/21.jpg') repeat;">

	<div class="container" style="background-color: whitesmoke;width: 1000px;">
		<nav class="navbar navbar-default " role="navigation">
			<div class="container-fluid">
				<div class="navbar-header">
					<a href="#" style="font-family:CrazyIt;font-size:28pt;text-decoration: none;">
						Person
					</a>
				</div>
				<div>
					<ul class="nav navbar-nav">
						<li style="margin-left: 50px;"><a href="../recommend/recommend.html">首页</a></li>

						<li style="display:flex;">
							<input type="text" class="form-control" placeholder="twitterhandle" style="width:200px;margin-top: 8px;margin-left: 20px;" />
							<button class="btn btn-info btn-lg" style="margin-top:8px;width: 50px;height: 33px;line-height: 10px;">
								<span class="glyphicon glyphicon-search" style="line-height: 5px;"></span> 
							</button>
						</li>
						<li style="margin-left: 200px;">
							<a href="#">
							<span class="badge pull-right">3</span>
							<span class="glyphicon glyphicon-bell"></span>
							</a>
						</li>
						<li>
							<a href="#"><img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="30" height="30" style="margin-top: -5px;" ></a>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<div style="height: 360px;">
			<div style="height: 180px;position: relative;">
				<img src="https://pic2.zhimg.com/v2-6e8fccc8a30e8cf15a90e7a894011579_r.jpg"  style="width: 968px;height: 180px;" id="newImage" >
				<input id="image" type='file' name='myFile' onchange="showPicture(this)" style="display: none"/>
				<button onclick="selectimg()" class="btn btn-info btn-lg" style="margin-left:800px;margin-top:-100px;position: relative;">
					<span class="glyphicon glyphicon-camera"></span> 上传封面图片
				</button>
			</div>
			<div style="height: 180px;display: flex;background-color: white; justify-content: space-between;">	
				<div class="col-md-12 column" style="position:relative">
					<img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="200" height="170" style="position: absolute;margin-left:10px;margin-top: -50px;">
					<div class="col-md-12 column" style="margin-left: 250px;">
						<h2>
							Heading
						</h2>
						<p>
							性别：男
						</p>
						<p>
							职业：IT
						</p>
						<p>
							<a class="btn" href="#">想了解更多，来我的博客吧！GO</a>
						</p>
					</div>
				</div>
				<a href="../manage/html/correctUserMessage.html" class="btn btn-info btn-lg" style="margin-top:40px;height: 45px;">
					<span class="glyphicon glyphicon-pencil">编辑个人资料</span> 
				</a>
			</div>
		</div>
		<div class="row" style="margin-top: 10px;">
			<div class="col-xs-12 col-md-8" >
				<div class="col-md-12 column">
					<div class="tabbable" id="tabs-760900">
						<ul class="nav nav-tabs">
							<li class="active">
								 <a href="#panel-403533" data-toggle="tab">帖子</a>
							</li>
							<li>
								<a href="#panel-659666" data-toggle="tab">草稿</a>
							</li>
							<li>
								 <a href="#panel-659756" data-toggle="tab">发帖</a>
							</li>
							<li>
								<a href="#panel-659766" data-toggle="tab">回答</a>
						   </li>
						   <li>
								<a href="#panel-659776" data-toggle="tab">视频</a>
							</li>
							<li >
								<a href="#panel-659786" data-toggle="tab">黑名单</a>
							</li>
							
							<li class="dropdown pull-right">
							   <a href="#" data-toggle="dropdown" class="dropdown-toggle">更多<strong class="caret"></strong></a>
							   <ul class="dropdown-menu">
								   <li>
										<a href="#panel-65666" data-toggle="tab">关注</a>
								   </li>
								   <li>
										<a href="#panel-65667" data-toggle="tab">收藏</a>
								   </li>
							   </ul>
						   </li>
					   </ul>
						<div class="tab-content">
							<div class="tab-pane active" id="panel-403533">
								<a href="#" class="list-group-item active">我的帖子</a>
								<div class="list-group">
														
									<div class="list-group-item" style="height: 220px;">
										<p>
											<em>100人</em> <small>赞了这篇文章</small> 
										</p>
										<div style="display: flex;">
											<img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="100" height="100" style="margin-left:10px;" >
											<div style="margin-top: -20px;margin-left: 20px;margin-top: -30px;">
												<h3>
												标题
												</h3>
												<h4 style="display: flex;justify-content: space-between;">
													作者<p> <small>发布时间：2020.3.20</small></p>
												</h4>
												<a href="#">
													Donec id elit non mi porta gravida at eget metus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante....
												</a>
											</div>
										</div>
										<a href="#" class="btn btn-info btn-lg" style="margin-top: 10px;width: 80px;height: 40px;">
										<span class="glyphicon glyphicon-thumbs-up" style="font-size: 15px;"> 赞</span> 
										</a>
										<button type="button" class="btn btn-default btn-sm" style="margin-top: 10px;width: 100px;height: 40px;">
										<span class="glyphicon glyphicon-comment" style="font-size: 15px;"> 2条评论</span>
										</button>
										<button type="button" class="btn btn-default btn-sm" style="margin-top: 10px;width: 80px;height: 40px;">
										<span class="glyphicon glyphicon-star" style="font-size: 15px;"> 收藏</span> 
										</button>
										<button type="button" class="btn btn-default btn-sm" style="margin-top: 10px;width: 80px;height: 40px;">
										<span class="glyphicon glyphicon-heart-empty" style="font-size: 15px;"> 喜欢</span> 
										</button>
										<button type="button" class="btn btn-default btn-sm" style="margin-top: 10px;width: 110px;height: 40px;">
										<span class="glyphicon glyphicon-flag" style="font-size: 15px;">100人浏览</span>
										</button>
							   		</div> 

									<div class="list-group-item" style="height: 220px;">
										<p>
											<em>100人</em> <small>赞了这篇文章</small> 
										</p>
										<div style="display: flex;">
											<img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="100" height="100" style="margin-left:10px;" >
											<div style="margin-top: -20px;margin-left: 20px;margin-top: -30px;">
												<h3>
												   标题
												</h3>
												<h4 style="display: flex;justify-content: space-between;">
													作者<p> <small>发布时间：2020.3.20</small></p>
												 </h4>
												<a href="#">
													Donec id elit non mi porta gravida at eget metus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante....
												</a>
											</div>
										</div>
										<a href="#" class="btn btn-info btn-lg" style="margin-top: 10px;width: 80px;height: 40px;">
										   <span class="glyphicon glyphicon-thumbs-up" style="font-size: 15px;"> 赞</span> 
										 </a>
										 <!-- <a href="#" class="btn btn-info btn-lg" style="margin-top: 10px;width: 80px;height: 40px;">
										   <span class="glyphicon glyphicon-thumbs-down" style="font-size: 15px;"> 踩</span> 
										 </a> -->
										 <button type="button" class="btn btn-default btn-sm" style="margin-top: 10px;width: 100px;height: 40px;">
										   <span class="glyphicon glyphicon-comment" style="font-size: 15px;"> 2条评论</span>
										 </button>
										 <button type="button" class="btn btn-default btn-sm" style="margin-top: 10px;width: 80px;height: 40px;">
										   <span class="glyphicon glyphicon-star" style="font-size: 15px;"> 收藏</span> 
										 </button>
										 <button type="button" class="btn btn-default btn-sm" style="margin-top: 10px;width: 80px;height: 40px;">
										   <span class="glyphicon glyphicon-heart-empty" style="font-size: 15px;"> 喜欢</span> 
										 </button>
										 <button type="button" class="btn btn-default btn-sm" style="margin-top: 10px;width:110px;height: 40px;">
										   <span class="glyphicon glyphicon-flag" style="font-size: 15px;">100人浏览</span>
										 </button>
								   </div> 

								   <div class="list-group-item" style="height: 220px;">
									<p>
										<em>100人</em> <small>赞了这篇文章</small> 
									</p>
									<div style="display: flex;">
										<img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="100" height="100" style="margin-left:10px;" >
										<div style="margin-top: -20px;margin-left: 20px;margin-top: -30px;">
												<h3>
												标题
												</h3>
												<h4 style="display: flex;justify-content: space-between;">
													作者<p> <small>发布时间：2020.3.20</small></p>
												</h4>
												<a href="#">
													Donec id elit non mi porta gravida at eget metus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante....
												</a>
											</div>
										</div>
										<a href="#" class="btn btn-info btn-lg" style="margin-top: 10px;width: 80px;height: 40px;">
											<span class="glyphicon glyphicon-thumbs-up" style="font-size: 15px;"> 赞</span> 
										</a>
										<button type="button" class="btn btn-default btn-sm" style="margin-top: 10px;width: 100px;height: 40px;">
											<span class="glyphicon glyphicon-comment" style="font-size: 15px;"> 2条评论</span>
										</button>
										<button type="button" class="btn btn-default btn-sm" style="margin-top: 10px;width: 80px;height: 40px;">
											<span class="glyphicon glyphicon-star" style="font-size: 15px;"> 收藏</span> 
										</button>
										<button type="button" class="btn btn-default btn-sm" style="margin-top: 10px;width: 80px;height: 40px;">
											<span class="glyphicon glyphicon-heart-empty" style="font-size: 15px;"> 喜欢</span> 
										</button>
										<button type="button" class="btn btn-default btn-sm" style="margin-top: 10px;width: 110px;height: 40px;">
											<span class="glyphicon glyphicon-flag" style="font-size: 15px;">100人浏览</span>
										</button>
							   		</div> 
								</div>
							</div>
							<div class="tab-pane" id="panel-659756">
								<p style="margin:120px 0 -150px 250px;"> <small>您还没有帖子，点击下方发布吧</small></p>
								<a href="#" class="btn btn-info btn-lg" style="margin:150px 250px;">
									
									<span class="glyphicon glyphicon-plus">点击此处发帖</span>
								</a>
								
							</div>
							<div class="tab-pane" id="panel-659666">
								<a href="#" class="list-group-item active">草稿箱</a>

							</div>
							<div class="tab-pane" id="panel-659766">
								<a href="#" class="list-group-item active">我的回答</a>
								
							</div>
							<div class="tab-pane" id="panel-659776">
								<a href="#" class="list-group-item active">我的视频</a>
								
							</div>
							<div class="tab-pane" id="panel-659786">
								<a href="#" class="list-group-item active">黑名单</a>
								<div class="list-group-item" style="height: 80px;">
									<span class="badge lahei" style="margin-top: 15px;">已拉黑</span> 
									<div style="display: flex;">	
										<img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="50" height="50" style="margin-left:10px;" >
										<div style="margin-top: -20px;margin-left: 20px;">
											<h3 style="height: 15px;">
												Heading
											</h3>
											<p>
												Donec id elit non mi porta gravida at eget metus.
											</p>
											
										</div>
									</div>
								   </div> 


							</div>
							
							<div class="tab-pane" id="panel-65666">
								<div class="row clearfix">
									<div class="col-md-12 column">
										<div class="tabbable" id="tabs-152377">
											<ul class="nav nav-tabs ">
												<li>
													 <a href="#panel-170517" data-toggle="tab">我关注的人</a>
												</li>
												<li>
													 <a href="#panel-34416" data-toggle="tab">关注我的人</a>
												</li>
											</ul>
											<div class="tab-content">
												<div class="tab-pane active" id="panel-170517">
													<div class="list-group">
														
													   <div class="list-group-item" style="height: 80px;">
															<span class="badge gua" style="margin-top: 15px;">已关注</span> 
															<div style="display: flex;">	
																<img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="50" height="50" style="margin-left:10px;" >
																<div style="margin-top: -20px;margin-left: 20px;">
																	<h3 style="height: 15px;">
																		Heading
																	</h3>
																	<p>
																		Donec id elit non mi porta gravida at eget metus.
																	</p>
																	
																</div>
															</div>
													   </div> 
													   <div class="list-group-item" style="height: 80px;">
														<span class="badge gua" style="margin-top: 15px;">已关注</span> 
														<div style="display: flex;">	
															<img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="50" height="50" style="margin-left:10px;" >
															<div style="margin-top: -20px;margin-left: 20px;">
																<h3 style="height: 15px;">
																	Heading
																</h3>
																<p>
																	Donec id elit non mi porta gravida at eget metus.
																</p>
																
															</div>
														</div>
												   </div>
												   <div class="list-group-item" style="height: 80px;">
													<span class="badge gua" style="margin-top: 15px;">已关注</span> 
													<div style="display: flex;">	
														<img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="50" height="50" style="margin-left:10px;" >
														<div style="margin-top: -20px;margin-left: 20px;">
															<h3 style="height: 15px;">
																Heading
															</h3>
															<p>
																Donec id elit non mi porta gravida at eget metus.
															</p>
															
														</div>
													</div>
											   		</div>
													<div class="list-group-item" style="height: 80px;">
														<span class="badge gua" style="margin-top: 15px;">已关注</span> 
														<div style="display: flex;">	
															<img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="50" height="50" style="margin-left:10px;" >
															<div style="margin-top: -20px;margin-left: 20px;">
																<h3 style="height: 15px;">
																	Heading
																</h3>
																<p>
																	Donec id elit non mi porta gravida at eget metus.
																</p>
																
															</div>
														</div>
										   			</div>
													<div class="list-group-item" style="height: 80px;">
														<span class="badge gua" style="margin-top: 15px;">已关注</span> 
														<div style="display: flex;">	
															<img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="50" height="50" style="margin-left:10px;" >
															<div style="margin-top: -20px;margin-left: 20px;">
																<h3 style="height: 15px;">
																	Heading
																</h3>
																<p>
																	Donec id elit non mi porta gravida at eget metus.
																</p>
																
															</div>
														</div>
													</div>
													<div class="list-group-item" style="height: 80px;">
														<span class="badge gua" style="margin-top: 15px;">已关注</span> 
														<div style="display: flex;">	
															<img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="50" height="50" style="margin-left:10px;" >
															<div style="margin-top: -20px;margin-left: 20px;">
																<h3 style="height: 15px;">
																	Heading
																</h3>
																<p>
																	Donec id elit non mi porta gravida at eget metus.
																</p>
																
															</div>
														</div>
													</div>
													<div class="list-group-item" style="height: 80px;">
														<span  class="badge gua" style="margin-top: 15px;">已关注</span> 
														<div style="display: flex;">	
															<img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="50" height="50" style="margin-left:10px;" >
															<div style="margin-top: -20px;margin-left: 20px;">
																<h3 style="height: 15px;">
																	Heading
																</h3>
																<p>
																	Donec id elit non mi porta gravida at eget metus.
																</p>
																
															</div>
														</div>
													</div>
													   <div class="list-group-item" style="height: 80px;">
															<span class="badge gua" style="margin-top: 15px;">已关注</span> 
															<div style="display: flex;">	
																<img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="50" height="50" style="margin-left:10px;" >
																<div style="margin-top: -20px;margin-left: 20px;">
																	<h3 style="height: 15px;">
																		Heading
																	</h3>
																	<p>
																		Donec id elit non mi porta gravida at eget metus.
																	</p>
																	
																</div>
															</div>
												   		</div> 
												   </div>
												</div>
												<div class="tab-pane" id="panel-34416">
													<div class="list-group-item" style="height: 80px;display: flex;justify-content: space-between;">
														<div style="display: flex;">	
															<img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="50" height="50" style="margin-left:10px;" >
															<div style="margin-top: -20px;margin-left: 20px;">
																<h3 style="height: 15px;">
																	Heading
																</h3>
																<p>
																	Donec id elit non mi porta gravida at eget metus.
																</p>
																
															</div>
														</div>
														<span id="guanzhu" class="label label-primary" style="margin-top: 15px;height: 20px;line-height: 18px;">+关注</span> 
													</div>
												</div>


											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="tab-pane" id="panel-65667">
								<a href="#" class="list-group-item active">收藏列表</a>
								
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-md-4">
				<div style="height: 200px;">
					<table class="table table-bordered">
						<thead >
							<tr >
								<th style="text-align: center;">关注</th>
								<th style="text-align: center;">粉丝</th>
								
							</tr>
						</thead>
						<tbody>
							<tr>
								<td style="text-align: center;">0</td>
								<td style="text-align: center;">0</td>
							</tr>
							
						</tbody>
					</table>	
					<table class="table table-bordered">
						<thead >
							<tr >
								<th style="text-align: center;">消费贡献度</th>
								<th style="text-align: center;">剩余贡献度</th>
								
							</tr>
						</thead>
						<tbody>
							<tr>
								<td style="text-align: center;">0</td>
								<td style="text-align: center;">0</td>
							</tr>
							
						</tbody>
					</table>
				</div>
				<div style="margin-top: 10px;">
					<a href="./1.html#panel-659756" class="list-group-item">关注的问题</a>
					<a href="#" class="list-group-item">关注的收藏夹</a>
					<a href="#" class="list-group-item">个人页面被浏览了xx次</a>
				</div>
			</div>
		  </div>
	</div>
</body>

<script type="text/javascript">
    $(".gua").mouseenter(function(){
		
		$(this).text("取消关注");
	});
	$(".gua").mouseleave(function(){
		$(this).text("已关注");
	});
	$(".lahei").mouseenter(function(){
		
		$(this).text("取消拉黑");
	});
	$(".lahei").mouseleave(function(){
		$(this).text("已拉黑");
	});


	var selectimg = function(){
        var a = document.getElementById("image").click();

	}
	function showPicture(imgFile){
// alert(window.URL.createObjectURL(imgFile.files[0]));
        /*获取上传文件的路径*/
        document.getElementById("newImage").src = window.URL.createObjectURL(imgFile.files[0]);
    }
</script>
</html>